<c-layouts.with-sidebar>
    <c-slot name="page_index">
        <c-index-link><a href="#install" class="no-underline">Install Cotton</a></c-index-link>
        <c-index-link><a href="#create-a-component" class="no-underline">Create a component</a></c-index-link>
        <c-index-link><a href="#templates-location" class="no-underline">Templates location</a></c-index-link>
        <c-index-link><a href="#include-a-component" class="no-underline">Include a component</a></c-index-link>
    </c-slot>

    <h1 id="install">Quickstart</h1>

    <h2 class="mt-0">Install cotton</h2>
    <p>Run the following command:</p>
    <c-snippet language="python" hide-label>pip install django-cotton</c-snippet>

    <p>Then update your settings.py:</p>

    <h3>For automatic configuration:</h3>

    <c-snippet language="python" label="settings.py">{% cotton:verbatim %}{% verbatim %}
INSTALLED_APPS = [
    'django_cotton',
]
    {% endverbatim %}{% endcotton:verbatim %}</c-snippet>

    <p>This will attempt to automatically handle the settings.py by adding the required loader and templatetags.</p>

    <h3>For custom configuration</h3>

    <p>If your project requires any non-default loaders or you do not wish Cotton to manage your settings, you should instead provide `django_cotton.apps.SimpleAppConfig` in your INSTALLED_APPS:</p>

    <c-snippet language="python" label="settings.py">{% cotton:verbatim %}{% verbatim %}
INSTALLED_APPS = [
    'django_cotton.apps.SimpleAppConfig',
]

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        ...
        "OPTIONS": {
            "loaders": [(
                "django.template.loaders.cached.Loader",
                [
                    "django_cotton.cotton_loader.Loader",
                    "django.template.loaders.filesystem.Loader",
                    "django.template.loaders.app_directories.Loader",
                ],
            )],
            "builtins": [
                "django_cotton.templatetags.cotton"
            ],
        }
    }
]
    {% endverbatim %}{% endcotton:verbatim %}</c-snippet>

    <c-hr id="create-a-component" />

    <h2>Create a component</h2>

    <p>Create a new directory in your templates directory called <span class="font-mono">cotton</span>. Inside this directory create a new file called <span class="font-mono">card.html</span> with the following content:</p>

    <c-snippet label="templates/cotton/card.html">{% cotton:verbatim %}{% verbatim %}
<div class="bg-white shadow rounded border p-4">
    <h2>{{ title }}</h2>
    <p>{{ slot }}</p>
    <button href="{% url url %}">Read more</button>
</div>
    {% endverbatim %}{% endcotton:verbatim %}</c-snippet>

    <c-hr id="templates-location" />

    <h2>Templates location</h2>

    <p>Cotton supports 2 common approaches regarding the location of the <code>templates</code> directory:</p>

    <c-ul>
        <li><strong>App level</strong> - You can place your cotton folder in any of your installed app folders, like: <div><code>[project]/[app]/templates/cotton/row.html</code></div></li>
        <li>
            <strong>Project root</strong> - You can place your cotton folder in a project level templates directory, like: <div><code>[project]/templates/cotton/row.html</code></div>
            (<code>[project]</code> location is provided by `BASE_DIR` if present or you may set it with `COTTON_BASE_DIR`)
        </li>
    </c-ul>

    <p>Any style will allow you to include your component the same way: <code>{{ '<c-row />'|force_escape }}</code></p>

    <c-hr id="include-a-component" />

    <h2>Include a component</h2>

<c-snippet language="python" label="views.py">{% cotton:verbatim %}{% verbatim %}
def dashboard_view(request):
    return render(request, "dashboard.html")
{% endverbatim %}{% endcotton:verbatim %}</c-snippet>

    <c-snippet label="templates/dashboard.html">{% cotton:verbatim %}{% verbatim %}
<c-card title="Trees" url="trees">
    We have the best trees
</c-card>

<c-card title="Spades" url="spades">
    The best spades in the land
</c-card>
    {% endverbatim %}{% endcotton:verbatim %}
<c-slot name="preview">
<div class="bg-white shadow rounded border p-4 mb-3">
    <h2 class="m-0 !text-gray-800">Trees</h2>
    <p>We have the best trees</p>
    <button href="/trees" class="text-teal-600">Read more</button>
</div>
<div class="bg-white shadow rounded border p-4 mb-3">
    <h2 class="m-0 !text-gray-800">Spades</h2>
    <p>The best spades in the land</p>
    <button href="/spades" class="text-teal-600">Read more</button>
</div>
</c-slot>
    </c-snippet>

    <c-navigation>
        <c-slot name="prev">
            <a href="{% url 'home' %}">Home</a>
        </c-slot>
        <c-slot name="next">
            <a href="{% url 'components' %}">Components</a>
        </c-slot>
    </c-navigation>

</c-layouts.with-sidebar>
